<template>
  <div class="app-container flex-row">
    <!-- 左侧树 -->
    <div class="conmmon-container-left scroll__y__content scrollbar-no-width" style="width:290px">
      <DataDictTree ref="dataDictTree" :hide-option-menu="false" @handleCreate="handleCreate" @handleRemove="removeRecord" @handleUpdate="handleUpdate" @currentSelected="currentSelectedDataDict" />
    </div>
    <div class="conmmon-container-main flex-main">
      <DataDictEditor :code="selecteDataDict.dataDictCode" />
    </div>
    <!--新增/编辑侧边栏-->
    <side-box :show="sideBox.dataDictShow" :title="sideBox.title" @close="sideBox.dataDictShow = !sideBox.dataDictShow">
      <template slot="body">
        <el-form
          ref="dataForm"
          :rules="dataDictRules"
          :model="dataDictRecord"
          label-position="right"
          label-width="120px">
          <el-form-item label="字典组代码:" prop="dataDictCode">
            <el-input v-model="dataDictRecord.dataDictCode" :disabled="sideBox.status==='update'" maxlength="40" placeholder="请输入" show-word-limit />
          </el-form-item>
          <el-form-item label="字典组名称:" prop="dataDictName">
            <el-input v-model="dataDictRecord.dataDictName" placeholder="请输入" maxlength="45" show-word-limit />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataDictRecord.remark" type="textarea" maxlength="255" show-word-limit />
          </el-form-item>
          <el-form-item label="国家标准:" prop="isNationalStandard">
            <el-radio v-model="dataDictRecord.isNationalStandard" :label="0">否</el-radio>
            <el-radio v-model="dataDictRecord.isNationalStandard" :label="1">是</el-radio>
          </el-form-item>
        </el-form>
      </template>
      <template slot="foot">
        <el-button plain type="primary" @click="sideBox.status==='create'?createData():updateData()">保存</el-button>
      </template>
    </side-box>
  </div>
</template>

<script>
import DataDictTree from './DataDictTree'
export default {
  components: { DataDictTree },

  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        dataDictName: '',
        pid: '-1',
        sort: this.common.SORT_DEFAULT
      },
      selecteDataDict: {},
      // 固定写法
      multipleSelectionRecords: [],
      // 固定写法
      sideBox: {
        dataDictShow: false,
        title: '',
        status: 'create' // 对话框状态
      },
      oldSort: [], // 排序之前的数组
      showFlag: true,
      // 固定写法
      dataDictRecord: {
        dataDictName: '',
        dataDictCode: ''
      },
      dataDictRules: {
        isNationalStandard: [
          { required: true, message: '请选择是否国家标准', trigger: 'blur' }
        ],
        dataDictName: [
          { required: true, message: '请输入字典组名称', trigger: 'blur' },
          { validator: this.commonValidate.checkInput, trigger: 'blur' }
        ],
        dataDictCode: [
          { required: true, message: '请输入字典组代码', trigger: 'blur' },
          { validator: this.commonValidate.validateEngOrNum, trigger: 'blur' }

        ]
      }
    }
  },
  created() {
  },
  methods: {
    async currentSelectedDataDict(data) {
      this.listQuery = {
        ...this.listQuery,
        pid: data.id
      }
      const response = await this.$store.dispatch('dataDictGet', { id: data.id })
      this.selecteDataDict = response
    },
    /* 新增*/
    handleCreate() {
      this.dataDictRecord = {
        isNationalStandard: 0
      }
      this.sideBox = {
        status: 'create',
        dataDictShow: true,
        title: '新增字典组'
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('dataDictSave', this.dataDictRecord).then(response => {
            this.sideBox.dataDictShow = false
            this.$refs.dataDictTree.initTreeNode()
            this.msgSuccess('创建成功')
          }).catch(() => {
            this.sideBox.dataDictShow = true
          })
        }
      })
    },

    /* 编辑*/
    handleUpdate(row) {
      this.dataDictRecord = Object.assign({}, row)
      this.sideBox = {
        status: 'update',
        dataDictShow: true,
        title: '编辑[' + this.dataDictRecord.dataDictName + ']'
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.dataDictRecord)
          this.$store.dispatch('dataDictUpdate', tempData).then(response => {
            this.sideBox.dataDictShow = false
            this.$refs.dataDictTree.initTreeNode()
            this.msgSuccess('修改成功')
          }).catch(() => {
            this.sideBox.dataDictShow = true
          })
        }
      })
    },

    removeRecord(nodeId) {
      if (nodeId !== undefined) {
        this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          ids.push(nodeId)
          this.$store.dispatch('dataDictRemove', ids).then(response => {
            this.$refs.dataDictTree.initTreeNode()
            this.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        this.msgWarning('请选择要删除的记录')
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
